<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<style type="text/css">
		@font-face {
			font-family: YanoneKaffeesatz;
			src: url(fonts/YanoneKaffeesatz-Regular.otf) format("opentype");
		}
 
		@font-face {
			font-family: YanoneKaffeesatz;
			src: url(fonts/YanoneKaffeesatz-Bold.otf) format("opentype");
			font-weight: bold;
		}
 
		body {
			font-family: YanoneKaffeesatz, Lucida Console, sans-serif;
			margin: 0;
		}
	
		input.placeholder-input-blank {
			color: #ccc;
			border: 1px solid #b6dcf8;
		}
		.my-form {
			margin-left: auto;
			margin-right: auto;
			width: 300px;
			text-align: center;
		}
		.my-form-label {
			float: left;
			clear: left;
			font-size: 20px;
		}
		.placeholder-input {
			font-family: YanoneKaffeesatz, Lucida Console, sans-serif;
			font-size: 16px;
			float: right;
			clear: right;			
			border: 1px solid #307bb0;
			height: 20px;
			margin: 2px;
			width: 200px;
		}
		.my-form-submit {
			font-family: YanoneKaffeesatz, Lucida Console, sans-serif;
			width: 296px;
			border: 1px solid #b6dcf8;
			height: 40px;
			font-size: 16px;
			margin-top: 3px;
			cursor: pointer;
			background:-webkit-gradient(
				linear,
				left bottom,
				left top,
				color-stop(0.35, rgb(189,189,189)),
				color-stop(0.64, rgb(224,224,224))
			);			
			background:-moz-linear-gradient(
				center bottom,
				rgb(189,189,189) 35%,
				rgb(224,224,224) 64%
			);
		}
		.progressbar {
			width: 296px;
			height: 20px;
			background: white;
			border: 1px solid #b6dcf8;
			float: left;
			text-align: left;
		}
		.progressbar div {
			height: 100%;
			width: 0;
			background: #1a5077;
		}
		.fix-opera {
			font-size: 12px;
			line-height: 27px;
		}
	</style>
	<!--[if IE]>
	<style type="text/css">
		.my-form-label {
			font-size: 12px;
			line-height: 27px;
		}
		html,body {
			height: 100%;
		}
	</style>
	<![endif]-->	
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery.tpl.min.js"></script>

	<script type="text/html" class="call args" id="centrify">
		{% /**
				*	Here comes centrify template
				*	All you need to pass is template name (as call) and args to pass to template
				*	Note that after rendering this template you must call $(window).resize();
				*/ %}
		{%
			var x = $.template(call)(args),
				  t = $("<div style='position:fixed'/>").append(x);
			function css() {								
				t.css({
					top: ($(window).height() - t.height())/2,
					left: ($(window).width() - t.width())/2
				});
			}
			
			$(window).resize(css);
		%}
		{%= t %}		
	</script>
	
	<script type="text/html" class="callback" id="progressbar">
		{% /**
			  *	Here comes progressbar.
		      *	All you need to pass is callback that will receive function to change value of progressbar
			*/ %}
		<div class="progressbar">
		
			{% /**
					* Catch inner div into a
					*/	%}
			{%catch var a%}<div></div>{%/catch%}
			
			{% /**
				  * Create jQuery object and print it
				  */ %}
			{%= a=$(a) %}
			
			{% /** Send a function to change progressbar position */ %}
			
			{%
			callback(function (value) {
				a.stop().animate({width: (value>0?(value>100?100:value):0)+"%"});
			});
			%}
		</div>
	</script>
	
	<script type="text/html" class="c cb name max id defval" id="placeholder-input">
	{% /**
			  *	Here comes input element.
		      *	Input arguments:
			  *	c - default classes for inputs
			  *	name - name of input
			  *	max	- max character count
			  *	defval - gray default value (that will replace blank value)
			*/ %}
	
	{%
		// Initialize input data
		c = c || {};
		c.normal = c.normal || "";
		c.def = c.def || "";
		c.blank = c.blank || "";
		name = name || "";
		defval = defval || "";
	%}
	
	{% /** Get into a html of input created using input data */ %}
	{%catch var a%}
		<input type="text" {%= max? 'maxlength="'+max+'"': '' %} name="{%= name %}" {%= id?'id='+id:'' %} class="{%= c.def + " " + c.blank %}" value="{%= defval %}"/>
	{%/catch%}	
	
	{% /** Create jQuery object, print it and attach some events */ %}
	{%= (a=$(a)).focus(function() {
	
		if (a.val() == defval)
			a.removeClass(c.blank).addClass(c.normal).val('');
			
	}).blur(function () {		
	
		if (a.val() == '')
			a.removeClass(c.normal).addClass(c.blank).val(defval);
			
	}).keyup(function () {
	
		cb ( (a.val().length/(max||1))*100);
		
	})	%}
	{% /** Create progressbar, calling template by name
			* Note: to use this type of printing you need to define template in your script
			* For example: $('#progressbar').render("progressbar");
			*/ %}
	{%: progressbar {
			callback : function (s) {
				
				// Save callback
				cb = s;				
			}
		} %}
	</script>
	

	
	<script type="text/html" class="inputs def" id="my-form">
	{% /**
			*	Here comes form with inputs
		    *	All you need to pass is inputs array and default values
			*/ %}
	<div class="my-form">
		<form method="POST">
		
		<h2>Simple example (of jQuery.tpl):</h2>
		
		{% /**
				*	We will go through all inputs
				*/ %}
		{%each inputs %}
			
			{% /**
					*	Create labels based on inputs[...].title
					*/ %}
			<label class="my-form-label">{%= this.title %}:</label>
			
			{% /**
					*	Call template with name "placeholder-input"
					*	
					*/ %}
			{%: placeholder-input $.extend(
												true,
												$.extend(
													{},
													def
												),
											this) %}
																					
			<div style="clear:both"></div>
			
		{%/each %}
		
		{% /**
				*	Here comes submit button
				*	Catch it in a variable
				*/ %}
		{%catch var a%}<input type="submit" value="Submit form" class="my-form-submit"/>{%/catch%}
		
		{% /**
				*	Print jQuery object
				*/ %}
		{%= a=$(a) %}
		
		{% /**
				*	Attach events
				*/ %}
		{% 
			a.click(function (E) {				
				if (confirm("Do you really want to post data?")) {
					
				} else 
					E.preventDefault();
			});
		%}
		</form>
		<br/>
		<small><i>coded by <a href="http://blog.habrastat.ru/">Fedor Indutny</a>, 2010</i></small>
	</div>
	</script>
	<script type="text/javascript">
		$(function () {
			// Compile and define "progressbar" template
			$("#progressbar").render("progressbar");
			
			// Compiler and define "placeholder-input" template
			$("#placeholder-input").render("placeholder-input");
			
			// Compiler and define "form" template
			$('#my-form').render("form");			
			
			// Compiler and run template to centrify
			$('#centrify').render({
				args:{
					def: {
						c: {
							blank: "placeholder-input-blank",
							def: "placeholder-input"
						}
					},
					inputs: [
						{ title: "First name", name: "firstname",  defval: "Adam",max:20},
						{ title: "Second name", name: "secondname",  defval: "Rogers",max:23},
						{ title: "Country", name: "country",  defval: "USA",max:15},
						{ title: "Job", name: "job",  defval: "Coder",max:27}
					]
				},
				call: "form"
			}).appendTo('body');
			
			// Centrify after render
			$(window).resize();
			
			// Some bugs in opera
			if ($.browser.opera)
				$('.my-form-label').addClass('fix-opera');
		});
	</script>
	<title>jQuery.tpl plugin's demo site</title>	
</head>
<body >
<script type='text/javascript'> 
var _gaq = _gaq || [];
_gaq.push(
    ['_setAccount', 'UA-15690174-1'],
    ['_setDomainName', 'dev.habrastat.ru'],
    ["_addOrganic", "mail.ru", "q"],
    ["_addOrganic","rambler.ru", "words"],
	["_addOrganic","nigma.ru", "s"],
    ["_addOrganic","blogs.yandex.ru", "text"],
    ["_addOrganic","webalta.ru", "q"],
    ["_addOrganic","aport.ru", "r"],
    ["_addOrganic","akavita.by", "z"],
    ["_addOrganic","meta.ua", "q"],
    ["_addOrganic","bigmir.net", "q"],
    ["_addOrganic","tut.by", "query"],
    ["_addOrganic","all.by", "query"],
    ["_addOrganic","i.ua", "q"],
    ["_addOrganic","online.ua", "q"],
    ["_addOrganic","a.ua", "s"],
    ["_addOrganic","ukr.net", "search_query"],
    ["_addOrganic","search.com.ua", "q"],
    ["_addOrganic","search.ua", "query"],
    ["_addOrganic","poisk.ru", "text"],
    ["_addOrganic","km.ru", "sq"],
    ["_addOrganic","liveinternet.ru", "ask"],
    ["_addOrganic","gogo.ru", "q"],
    ["_addOrganic","gde.ru", "keywords"],
    ["_addOrganic","quintura.ru", "request"],
    ['_trackPageview']
);
 
(function() {
 var ga = document.createElement('script');
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 ga.setAttribute('async', 'true');
 document.documentElement.firstChild.appendChild(ga);
})();</script> 	
</body>
</html>